import {Component, ElementRef, NgZone, OnDestroy, OnInit} from '@angular/core';
import {Events, NavController} from '@ionic/angular';
import {BaseTabPage} from '../../common/baseTabPage';
import {HttpService} from '../../services/http.service';
import {UrlAndOPT} from '../../common/url-and-opt.enum';
import {ConfigService} from '../../services/config.service';
import {Observable} from 'rxjs';
import {AppConfig} from '../../common/app-config.enum';
import * as networkReducer from '../../reducers/network.reducer';
import {select, Store} from '@ngrx/store';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage extends BaseTabPage implements OnInit, OnDestroy {

  // 轮播图片
  public imgList: any[] = [];
  // 新标数据
  public firstBid: any = {};
  // 散标数据
  public bidList: any[] = [];
  // 底部信息
  public aboutInfo = {};
  // 轮播图配置
  public slideOpts = {
    autoplay: {
      delay: 5000,
      disableOnInteraction: false
    },
    loop: true
  };
  public title = {
    firstTitle: '新标推荐',
    subTitle: '优选产品，强力推荐'
  };

  constructor(public zone: NgZone,
              public elRef: ElementRef,
              private events: Events,
              public configService: ConfigService,
              private navCtrl: NavController,
              private service$: HttpService,
              private store: Store<networkReducer.NetworkState>
  ) {
    super(zone, elRef);
    // 侦听网络状态变化
    this.store.pipe(select(networkReducer.getNetwork))
      .subscribe(networkState => {
        if (networkState.status  === 1) {
          this.getDataList()
            .subscribe(obj => {
              this.handler(obj);
            });
        }
      });
    // 手势解锁后重新加载数据(防止进入手势解锁页时TAB中的页面，解锁成功后数据不刷新)
    this.events.subscribe(AppConfig.TOPIC_TAB_REFRESH, () => {
      this.getDataList()
        .subscribe(obj => {
          this.handler(obj);
        });
    });
  }

  ngOnInit() {
    // 获取header中的元素
    this.getTopElement();
    this.getAboutInfo();
  }

  ngOnDestroy(): void {
    this.events.unsubscribe(AppConfig.TOPIC_TAB_REFRESH);
  }

  // 获取列表数据
  private getDataList(): Observable<any> {
    return this.service$.doRequest(UrlAndOPT.home_bidList);
  }

  private handler(obj) {
    if (obj) {
      this.imgList = obj['banners'].map(imgObj => imgObj['image_url']);
      if (obj['newBid']) {
        this.title = {
          firstTitle: '新手专区',
          subTitle: '资金管理，省心之选'
        };
        this.firstBid = obj['newBid'];
        this.bidList = obj['invests'].slice(0, 2);
      } else {
        this.title = {
          firstTitle: '新标推荐',
          subTitle: '优选产品，强力推荐'
        };
        this.firstBid = obj['invests'][0];
        this.bidList = obj['invests'].slice(1, 3);
      }
    }
  }

  // 获取底部信息
  private getAboutInfo() {
    this.aboutInfo = {
      qqcode: '480365008',
      telephone: '0311-83804040'
    };
  }
  // 查看标的详情
  pushDetail(bidIdSign: any) {
    this.navCtrl.navigateForward(['/bid', {bidIdSign: bidIdSign}]);
  }
  // 下拉刷新标的信息
  doRefresh(event) {
    this.getDataList()
      .subscribe(obj => {
        this.handler(obj);
        if (event) {  // 如果为下拉刷新，关闭下拉组件
          event.target.complete();
        }
      }, () => {
        if (event) {
          event.target.complete();
        }
      });
  }

}
